<!-- 登录 -->
<template>
	<view class="page-Box">

		<!-- 手机登录 -->
		<PhoneLogin v-if="!type" :agreement="agreement" @getRequestMsg="getRequestMsg"></PhoneLogin>


		<!-- 微信快速登录 -->
		<view class="wxlogin">
			<WxLogin v-if="type" :agreement="agreement" @getRequestMsg="getRequestMsg"></WxLogin>
		</view>


		<!-- 是否勾选协议 -->
		<view class="text">
			<TickProtocol @submit="setAgreement"></TickProtocol>
		</view>
		

		<view class="icon">
			<view class="icon-line">
				<view class="icon-line1"></view>
				<view class="icon-line-text">or</view>
				<view class="icon-line1"></view>
			</view>

			<view class="icon-icons">
				<uni-icons v-if="!type" type="weixin" size="60rpx" color="#42b983"  @click="type = true"></uni-icons>
				<uni-icons v-else custom-prefix="iconfont2" type="icon-shouji" size="60rpx" color="#42b983"  @click="type = false"></uni-icons>
			</view>
		</view>

	</view>

</template>

<script>
	// 引入图片
	import imgs from '@/static/images/index.js'
	
	
	// 引入vuex
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex'



	// 页面组件
	import PhoneLogin from './components/phone-login.vue'
	import WxLogin from './components/wx-login.vue'
	import TickProtocol from './components/tick-protocol.vue'


	export default {
		components: {
			PhoneLogin,
			WxLogin,
			TickProtocol
		},
		data() {
			return {
				images: {}, // 图片组
				agreement: false, // 是否勾选协议
				
				type: false, //是否是微信快速登录

			};
		},
		created() {
			this.images = {
				...imgs
			}
			console.log(this.userInfo, '登录登录', Object.keys(this.userInfo).length);
			this.$public.showText(this.userInfo.loginToken + '哈哈哈')

			this.init()
		},
		computed: {
			...mapGetters(['userInfo']),
		},
		methods: {

			/**
			 * 初始化
			 */
			init() {

				// 如果登陆了，并且是艺人，那就进入首页
				if (Object.keys(this.userInfo).length > 0 && this.userInfo.phone && this.userInfo.userArtistVo !== null) {
					// 如果有电话就运行
					uni.switchTab({
						url: '/pages/homeTab/index'
					});
				}
			},


			/**
			 * 是否勾选同意协议
			 */
			setAgreement(val) {
				this.agreement = val
				console.log(val, '是否勾选协议');
			},
			
			/**
			 * 获取消息模板
			 */
			getRequestMsg() {
				console.log('运行快看快看');
				wx.requestSubscribeMessage({
					tmplIds: ['EkVdE3Us3KyUceMlRrDbNmI_SFwA3fem_FwSP02r_IY',
						'pklN51gFrU6anMv8xTElTv4AreSY2wRLdOouRePAoT0',
						'CYRgeXUDnmoEDIU4Pq5rMzFmwU_liqW_fGPtayxtD-s'
					],
					success(res) {
						console.log(res, 'kkkkkkkkk');
					},
					fail(err) {
						console.log(err, '错误111111');
					},
					complete(res) {
						console.log('运行结束');
					}
				})
			
			
			
			}






		}
	}
</script>

<style lang="less" scoped>
	.page-Box {
		min-height: 100vh;
		background: linear-gradient(180deg, rgba(238, 212, 215, 0.8) -3%, rgba(238, 212, 215, 0.2) 100%);
		
		
		.wxlogin{
			// overflow: hidden;
		}
		
		.text{
			margin-top: 24rpx;
			#padding(0 24rpx);
		}
		

		.icon {
			margin-top: 60rpx;
			#flex(column, -, center);

			.icon-line {
				#flex(-, center, center);

				.icon-line1 {
					#box(300rpx, 2rpx, 0, rgba(#000, .1));
				}

				.icon-line-text {
					#font(28rpx, #999);
					margin: 0 24rpx;
				}

			}

			.icon-icons {
				#box(80rpx, 80rpx, 100%);
				#flex(-, center, center);
				border: 2rpx solid rgba(#000, .1);
				margin-top: 24rpx;
			}
		}


	}
</style>